<template>
  <div class="sel_character">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" class="tl" @submit.native.prevent>
          <el-form-item label="标题：">
            <el-input size="small" clearable v-model="book_title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item>
            <el-row class="tl">
              <el-col :span="24">
                <el-button :loading="$store.state.isLoading" size="small" class="top_weiy" type="primary" @click="get_shoplist">查询</el-button>
                <el-button :loading="$store.state.isLoading" size="small" class="top_weiy" type="primary" @click="delSearch">一键清除</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="list.data" stripe header-row-class-name="head_color" tooltip-effect="dark" style="width: 99.9%">
      <el-table-column label="头像" min-width="80" align="center">
        <template slot-scope="scope">
          <div class="user_table">
            <img
              :src="$fnc.getImgUrl(scope.row.avatar)"
              style="width:80px;height:80px;border-radius:50%;"
              alt
            />
          </div>
        </template>
      </el-table-column>
      
      <el-table-column label="人物详情" min-width="80">
        <template slot-scope="scope">
          <div class="user_table">
            <span>标题：</span>
            <small>{{ scope.row.title || "----" }}</small>
            <br />
            <span>简介：</span>
            <small>{{ scope.row.introduction || "----" }}</small>
            <br />
            <span>分类：</span>
            <small>{{ scope.row.cate_id_cn}}</small>
            <br />
          </div>
        </template>
      </el-table-column>
      
      <el-table-column label="信息详情" align="center" min-width="100">
        <template slot-scope="scope">
          <div class="user_table">
            <span>学习人数：</span>
            <small>{{ scope.row.pv||0 }}</small>
            <br />
            <span>粉丝数：</span>
            <small>{{ scope.row.fan||0 }}</small>
            <br />
            <span>作品数：</span>
            <small>{{ scope.row.works||0}}</small>
            <br />
            <span>点赞数：</span>
            <small>{{ scope.row.likes||0 }}</small>
            <br />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="120">
        <template slot-scope="scope">
          <el-button :loading="$store.state.isLoading" size="mini" @click="addBook(scope.row)">添加</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="table_bottom">
        <el-col :span="24" class="tr">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="list.all_num">
          </el-pagination>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default{
    name: "xzBook",
    components: {},
    props: {
      show: {
        type: Boolean,
      },
      types: {
        type: String,
        default: "",
      }
    },
    data() {
      return {
        book_title: "",
        list: {},
        currentPage1: 1,
        pageSize: 10,
        loading: false,
        list: [],
      };
    },
    methods:{
      get_shoplist(page) {
        var type, is_supplier;
        this.loading = true;
        var active = this.types;
        var params = page || {};
        params.title = this.book_title;
        this.$api.getCharacter.getCharacterList(params).then((res) => {
          if (res.data.code == 200) {
            this.list = res.data.result;
            // this.$store.dispatch("getcarInfoCate", this.list);
          }
          this.loading = false;
        });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        var params = {};
        params.page = "";
        params.page_size = val;
        this.currentPage1 = 1;
        this.get_shoplist(params);
      },
      handleCurrentChange(val) {
        var params = {};
        params.page = val;
        this.get_shoplist(params);
      },
      delSearch(){
        // 一键清除
        this.book_title = "";
        this.get_shoplist();
      },
      addBook(row) {
        console.log(row);
        row.url_title = "人物选择";
        this.$emit("sendCharacter", row);
      },
    },
    watch: {
      show(old, after) {
        if (old == true) {
          this.currentPage1 = 1;
          this.pageSize = 10;
          var params = {};
          params.page = 1;
          params.page_size = 10;
          this.get_shoplist(params);
        }
      },
    },
  }
</script>

<style>
</style>
